<template>
  <div class="register">
    <van-nav-bar
      title="用户注册"
      left-text="返回"
      :fixed="true"
      left-arrow
      @click-left="back"
    ></van-nav-bar>
    <div class="content">
      <div class="logo">
        <div class="logo-img">
          <img src="../assets/logo.png" alt="" />
        </div>
        <div class="logo-text">luckin coffee</div>
      </div>
      <div class="form">
        <van-form @submit="register">
          <van-field
            v-model="uesrInfo.nickName"
            name="昵称"
            label="昵称"
            placeholder="昵称"
            :rules="[{ required: true, message: '请填写昵称' }]"
          />
          <van-field
            v-model="uesrInfo.phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
            v-model="uesrInfo.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >注册</van-button
            >
          </div>
        </van-form>
        <p class="toLogin" @click="toLogin">已有账号？点击前往登录</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      uesrInfo: {
        nickName: "",
        phone: "",
        password: "",
      },
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    register() {
      this.axios({
        method: "post",
        url: "/register",
        data: {
          ...this.uesrInfo,
        },
      })
        .then((result) => {

          if (result.data.code == 100) {
            this.$dialog
              .confirm({
                title: result.data.msg,
                message: "立即前往登录",
              })
              .then(() => {
                return this.$router.push({ name: "Login" });
              })
              .catch(() => {});
            for (let key in this.uesrInfo) {
              this.uesrInfo[key] = "";
            }
          } else if (result.data.code == 102) {
            this.$notify({ type: "danger", message: result.data.msg });
          }
        })
        .catch((err) => {

        });
    },
    toLogin() {
      this.$router.push({name:"Login"});
    },
  },
};
</script>

<style lang="less" scoped>
  .van-nav-bar--fixed{
    padding-top: 30px;
    background-color: #0022ab;
  }
  /deep/.van-nav-bar__title{
    color: #fff;
  }
  /deep/.van-icon{
    color: #fff;
  }
  /deep/.van-nav-bar__text{
    color: #fff;
  }
.content {
  width: 100%;
  height: 620px;
  padding: 10px;
  margin-top: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .logo {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px;
    .logo-img {
      width: 100px;
      height: 100px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .logo-text {
      font-size: 20px;
      font-weight: 600;
    }
  }
  .form {
    width: 100%;
    .toLogin {
      text-align: center;
      color: blue;
    }
  }
}
</style>